﻿@{
    Layout = "";
    ViewBag.Title = "RequestAnimationFrame";
}

<!DOCTYPE html>
<html>
  <head>
    <title>Script-based animation using requestAnimationFrame</title>
    <style type="text/css">
     #animated { 
       position: absolute; top:100px; 
       padding: 50px; background: crimson; color: white; 
       }
    </style>

 
  </head>
  <body>
    <div>Click the box to stop and start it</div>
    <div id="animated">Hello there.</div>
   
    <script type="text/javascript">
      // global variables 
      var elm = document.getElementById("animated");
      var handle = 0;
      var lPos = 0;

      renderLoop();  // call animation frame to start

      function renderLoop() {
          elm.style.left = ((lPos += 3) % 600) + "px";
          //handle = setTimeout(renderLoop, 10);
          handle = window.requestAnimationFrame(renderLoop);
          console.log(typeof(handle));
      }

      // click the box to stop the animation 
      document.getElementById("animated").addEventListener("click", function() {
          if (handle) {
              //clearTimeout(handle);
              window.cancelAnimationFrame(handle);
              handle = null;
          } else {
              renderLoop();
          }
      }, false);

      </script>

  </body>
</html>
